<template>
  <div>
    <div id="cesiumContainer"></div>
    <div class="btn-toolbar">
      <div id="toolbar" class="toolbar">
        <!-- 图层列表 -->
        <a id="btn-layer-manager" class="btn btn-inverse" data-toggle="dropdown" title="图层列表" aria-expanded="true"
          @click="addLayer">
          <span class="iconfont icon-layer" style="font-size:16px;"></span>
          <div class="dropdown-container dropdown-visiable" id="layer-manager-dropdown"
            style="min-width:260px;text-align:left;padding:8px" v-if="isVisiable">
            <div id="layerTree" class="treeview">
              <!-- a-tree -->
              <a-tree checkable="true" :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys" :tree-data="treeData" @expand="onExpand" @select="onSelect">
              </a-tree>
            </div>
          </div>
        </a>
        <!-- 分隔条 -->
        <a class="btn btn-inverse" style="padding:10px 0px;">
          <span style="border-left:1px solid #dddddd;"></span>
        </a>
        <!-- 展开按钮 -->
        <a id="btn-expand" class="btn btn-inverse" v-if="isBtnGroupExpand" title="展开" @click="fold">
          <span class="iconfont icon-toolbar_expand"></span>
        </a>
        <!-- 按钮组合 -->
        <div id="btn-group" class="btn-group" v-if="!isBtnGroupExpand">
          <a id="btn-add-layer" class="btn btn-inverse" title="添加图层" aria-expanded="false">
            <span class="iconfont icon-toolbar-add_layer"></span>
          </a>
          <a data-toggle="dropdown" id="btn-base-layer" class="btn btn-inverse" title="底图" aria-expanded="false">
            <span class="iconfont icon-earth"></span>
          </a>
          <a data-toggle="dropdown" id="btn-setting" class="btn btn-inverse" title="场景">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding:10px 0px;">
            <span style="border-left:1px solid #dddddd;"></span>
          </a>
          <a data-toggle="dropdown" id="btn-clip" class="btn btn-inverse" title="裁剪">
            <span class="iconfont icon-toolbar-clip"></span>
          </a>
          <a data-toggle="dropdown" id="btn-terrain" class="btn btn-inverse" title="地形">
            <span class="iconfont icon-toolbar-terrain"></span>
          </a>
          <a data-toggle="dropdown" id="btn-analysis" class="btn btn-inverse" title="三维分析">
            <span class="iconfont icon-toolbar-analysis"></span>
          </a>
          <a data-toggle="dropdown" id="btn-measure" class="btn btn-inverse" title="量算">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding:10px 0px;">
            <span style="border-left:1px solid #dddddd;"></span>
          </a>
          <a id="btn-edit" class="btn btn-inverse" title="编辑">
            <span class="iconfont icon-toolbar-online-edit"></span>
          </a>
          <a id="btn-fold" class="btn btn-inverse" title="收起" @click="fold">
            <span class="iconfont icon-toolbar-fold"></span>
          </a>
        </div>
      </div>
      <div class="toolbar-content-container">
        <div class="toolbar-content-wrapper-inactive"></div>
      </div>
    </div>
  </div>
</template>

<script>
  const treeData = [{
      title: 'DEM',
      key: '0',
      children: [{
          title: '1:500',
          key: '0-0'
        },
        {
          title: '1:1000',
          key: '0-1'
        }
      ]
    },
    {
      title: 'DOM',
      key: '1',
      children: [{
          title: '1:500',
          key: '1-1'
        },
        {
          title: '1:1000',
          key: '1-2'
        }
      ]
    }
  ];

  export default {
    name: "SupermapCesiumContainer",
    props: {
      msg: String
    },
    mounted() {
      /* eslint-disable */
      var viewer = new Cesium.Viewer("cesiumContainer", {
        cesiumLogo: false
      })
      viewer._cesiumWidget._creditContainer.style.display = "none"

      /* eslint-enable */
    },
    data() {
      return {
        isVisiable: false,
        isBtnGroupExpand: false,
        expandedKeys: ['0-1', '1-1'],
        autoExpandParent: true,
        checkedKeys: ['0', '1-2'],
        selectedKyes: [],
        treeData
      }
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      addLayer() {
        this.isVisiable = !this.isVisiable;
      },
      fold() {
        this.isBtnGroupExpand = !this.isBtnGroupExpand;
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys);
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onCheck(checkedKeys) {
        console.log('onCheck', checkedKeys);
        this.checkedKeys = checkedKeys;
      },
      onSelect(selectedKeys, info) {
        console.log('onSelect', info);
        this.selectedKeys = selectedKeys;
      }
    }
  }
</script>

<style lang="less" scoped>
  // #cesiumContainer {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   height: 100%;
  //   width: 100%;
  //   margin: 0;
  //   padding: 0;
  //   overflow: hidden;

  //   font-family: sans-serif;
  //   font-size: 10pt;
  //   background: #000;
  //   color: #eee;
  // }

  //   .btn-toolbar {
  //   position: absolute;
  //   left: 0px;
  //   top: 0px;
  //   margin-left: -5px;
  //   z-index: 1;
  // }

  // .btn {
  //   display: inline-block;
  //   margin-bottom: 0;
  //   text-align: center;
  //   white-space: nowrap;
  //   touch-action: manipulation;
  //   cursor: pointer;
  // }

  // .btn:hover {
  //   outline: 1px;
  //   border-color: #c0baba;
  // }

  // .btn-inverse {
  //   color: #2ec5ad;
  //   background-color: rgba(38, 38, 38, 0.75);
  //   vertical-align: middle;
  // }

  // .btn-inverse:hover {
  //   background: #2c3e50;
  //   color: #fff;
  // }

  // .btn-group {
  //   position: relative;
  //   display: inline-block;
  //   vertical-align: middle;
  // }

  // #toolbar {
  //   margin: 5px 5px 5px 8px;
  // }

  // #toolbar a {
  //   padding: 10px 12px;
  //   background-color: rgba(38, 38, 38, 0.75);
  // }

  // #toolbar a:hover {
  //   cursor: pointer;
  // }

  // // 设置底图
  // #btn-base-layer > .drop-down-container {
  //   padding: 5px 10px;
  // }

  // .dropdown-container {
  //   display: block;
  //   position: absolute;
  //   top: 100%;
  //   box-sizing: border-box;
  //   left: 0;
  //   border: 1px solid #526f82;
  //   margin: 9px;
  //   color: white;
  //   background-color: rgba(38, 38, 38, 0.75);
  // }
</style>